<template>
  <div>
    <el-button size="large" @click="changeLoadData">刷新页面</el-button>
    <el-button size="large" @click="updataLoadData">新增子集</el-button>

    <el-table
      :data="tableData1"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :key="DateNow"
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="属性" width="80">
        <template #default="{ row }">
          <el-button type="text" @click="updateSubsetData(row)"
            >点击更新</el-button
          >
        </template>
      </el-table-column>

      <el-table-column prop="date" label="Date" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { watch, ref, nextTick } from "vue";

const DateNow = ref(Date.now());

interface User {
  id: number;
  date: string;
  name: string;
  address: string;
  hasChildren?: boolean;
  children?: User[];
}

const newData = [
  {
    id: 333,
    date: "xxxx",
    name: "xxxx",
    address: "xxxx",
  },
  {
    id: 334,
    date: "11111",
    name: "222222222",
    address: "xxxx",
  },
];

const load = async (
  row: User,
  treeNode: unknown,
  resolve: (date: User[]) => void
) => {
  const loadData = [
    {
      id: 31,
      date: "2016-05-01",
      name: "wangxiaohu",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      id: 32,
      date: "2016-05-01",
      name: "wangxiaohu",
      address: "No. 189, Grove St, Los Angeles",
    },
  ];
  // 模拟延迟加载
  await new Promise((r) => setTimeout(r, 1000));
  resolve(loadData);
  // 在加载子数据后，同步全选状态
  if (treeNode.selected) {
    for (const child of loadData) {
      child.selected = true;
    }
  }
  setNewRowData(row, loadData);
};

let tableData1: User[] = ref([
  {
    id: 1,
    date: "2016-05-02",
    name: "wangxiaohu",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: 2,
    date: "2016-05-04",
    name: "wangxiaohu",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: 3,
    date: "2016-05-01",
    name: "wangxiaohu",
    hasChildren: true,
    address: "No. 189, Grove St, Los Angeles",
    children: [],
  },
  {
    id: 4,
    date: "2016-05-03",
    name: "wangxiaohu",
    address: "No. 189, Grove St, Los Angeles",
  },
]);

function setNewRowData(row, res) {
  row.children = res;
}

const needRefresh = ref(false);

const changeLoadData = () => {
  // 假设我们直接将新数据添加到根节点或找到的匹配节点下
  const copyTableData1 = JSON.parse(JSON.stringify(tableData1.value));
  copyTableData1.forEach((rootNode) => {
    if (rootNode.hasChildren && rootNode.id === 3) {
      // 如果需要根据ID或其他条件匹配，请在这里添加逻辑
      // 示例逻辑：直接追加到根节点的children中
      rootNode.children?.push(...newData);
    }
  });
  tableData1.value = copyTableData1;
  DateNow.value = Date.now();
  // 设置标志以触发重新加载或直接更新视图
  needRefresh.value = true;
};

const updataLoadData = () => {
  // 假设我们直接将新数据添加到根节点或找到的匹配节点下

  tableData1.value.forEach((rootNode) => {
    if (rootNode.hasChildren && rootNode.id === 3) {
      // 如果需要根据ID或其他条件匹配，请在这里添加逻辑
      // 示例逻辑：直接追加到根节点的children中
      rootNode.children?.push(...newData);
    }
  });
  tableData1.value = tableData1.value;
  // 设置标志以触发重新加载或直接更新视图
  needRefresh.value = true;
};

// 监听needRefresh变化，当有新数据需要加载时，触发表格更新
watch(needRefresh, (newValue) => {
  if (newValue) {
    const targetNode = tableData1.value.find((node) => node.id === 3);
    if (targetNode) {
      load(targetNode, null, () => {}); // 调用load方法重新加载子数据
    }
    needRefresh.value = false; // 重置标志
  }
});

// 新增点击属性更新数据的方法
const updateSubsetData = async (row: User) => {
  if (!row.hasChildren) return;
  if (row.children) {
    row.children.push(...newData);
  } else {
    row.children = newData;
  }
  await nextTick();
};
</script>
